<!DOCTYPE html>
<html>
<body>
  <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
  <script src="https://unpkg.com/vue-i18n@next"></script>
  <script src="vue3-sfc-loader.js"></script>
  <script>

    /* <!-- */
    const config = {
      files: {
        '/component.vue': `
          <template>
            <span class="vue3">{{ $t('hello') }}</span>
          </template>
          <style scoped>
            .vue3 {
              background: red;
            }
          </style>
          <i18n>
          {
            "en": {
              "hello": "hello world!"
            },
            "ja": {
              "hello": "こんにちは、世界！"
            }
          }
          </i18n>
       `
      }
    };
    /* --> */

    const i18n = VueI18n.createI18n();

    const options = {
      moduleCache: { vue: Vue },
      getFile: url => config.files[url],
      addStyle: (textContent) => {
          const style = Object.assign(document.createElement('style'), { textContent });
          const ref = document.head.getElementsByTagName('style')[0] || null;
          document.head.insertBefore(style, ref);
      },
      customBlockHandler(block, filename, options) {

        if ( block.type !== 'i18n' )
          return

        const messages = JSON.parse(block.content);
        for ( let locale in messages )
          i18n.global.mergeLocaleMessage(locale, messages[locale]);
      }
    }

    const app = Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/component.vue', options)));

    app.use(i18n);

    app.mount(document.body);

  </script>
</body>
</html>
